<!--
 * @jixuanyu: jixuanyu
 * @Date: 2023-12-22 13:38:24
 * @LastEditors: jixuanyu
 * @LastEditTime: 2023-12-22 15:36:41
 * @Description: file content
-->
<template>
  <a-carousel
    :autoplay="autoplay"
    :dot-position="dotPosition"
    :dots="dots"
    :dots-class="dotsClass"
    :easing="easing"
    :effect="effect"
    :after-change="afterChange"
    :before-change="beforeChange"
  >
    <template v-if="$slots.prevArrow" #prevArrow>
      <slot name="prevArrow" />
    </template>
    <template v-if="$slots.nextArrow" #nextArrow>
      <slot name="nextArrow" />
    </template>
    <template v-if="$slots.customPaging" #customPaging="props">
      <slot name="customPaging" v-bind="{...props}" />
    </template>
    <slot />
  </a-carousel>
</template>
<script>
import { defineComponent } from 'vue'
import { Carousel } from 'ant-design-vue'
export default defineComponent({
  name: 'ZCarousel',
  components: {
    ACarousel: Carousel
  },
  props: {
    autoplay: {
      type: Boolean,
      default: false
    },
    dotPosition: {
      type: String,
      default: 'bottom'
    },
    dots: {
      type: Boolean,
      default: true
    },
    dotsClass: {
      type: String,
      default: 'slick-dots'
    },
    easing: {
      type: String,
      default: 'linear'
    },
    effect: {
      type: String,
      default: 'scrollx'
    },
    afterChange: {
      type: Function,
      default: undefined
    },
    beforeChange: {
      type: Function,
      default: undefined
    }
  }
})
</script>
